import React, { useState } from 'react'
import Right from "../../editor_page/Right/index"
import { Button } from "antd";
import Animations from "../../editor_page/dong/Animations"

function TabRight() {
    type Tab = 'tab6' | 'tab7' | 'tab8';
    const [activeTab, setActiveTab] = useState<Tab>('tab6');

    const handleTabClick = (tab: Tab) => {
        setActiveTab(tab);
    };
    return (
        <div>
            <div className='right_table' style={{ width: "300px", height: "100%" }}>
                <button
                    className={activeTab === 'tab6' ? 'active' : ''}
                    onClick={() => handleTabClick('tab6')}
                >
                    页面设置
                </button>
                <button
                    className={activeTab === 'tab7' ? 'active' : ''}
                    onClick={() => handleTabClick('tab7')}
                >
                    图层管理
                </button>
                <button
                    className={activeTab === 'tab8' ? 'active' : ''}
                    onClick={() => handleTabClick('tab8')}
                >
                    页面管理
                </button>
                {activeTab === 'tab6' && <Right />}
                {activeTab === 'tab7' &&
                    <div>
                        <Animations />
                    </div>
                }
                {activeTab === 'tab8' && <p>Tab 3 content</p>}
            </div>
        </div>
    )
}

export default TabRight
